<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>xFio - {{.title}}</title>
    <link href="/static/vendor/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="/static/css/style.css">
    <link href="/static/vendor/fontawesome/css/all.min.css" rel="stylesheet">
</head>
<body>
    <div class="sidebar">
        <div class="sidebar-header">
            <h3><span class="brand-icon" aria-hidden="true">
                <svg viewBox="0 0 24 24" role="img" focusable="false" class="xfio-logo-svg">
                    <circle cx="12" cy="12" r="11" class="disk" />
                    <path d="M13.5 2L6 14h5.2L10.5 22 18 10h-5.2L13.5 2z" class="bolt" />
                </svg>
            </span><span class="brand-word">x<span class="brand-f">F</span>io</span></h3>
            <p>分布式fio性能测试控制中心</p>
        </div>
        <div class="sidebar-nav">
            <nav class="nav flex-column">
                <a class="nav-link {{if eq .currentPage "dashboard"}}active{{end}}" href="/"><i class="fas fa-home"></i> 首页</a>
                <a class="nav-link {{if eq .currentPage "workers"}}active{{end}}" href="/workers"><i class="fas fa-server"></i> 节点管理</a>
                <a class="nav-link {{if eq .currentPage "test-cases"}}active{{end}}" href="/test-cases"><i class="fas fa-file-code"></i> 测试用例</a>
                <a class="nav-link {{if eq .currentPage "tasks"}}active{{end}}" href="/tasks"><i class="fas fa-tasks"></i> 任务管理</a>
                <a class="nav-link {{if eq .currentPage "results"}}active{{end}}" href="/results"><i class="fas fa-chart-bar"></i> 结果分析</a>
            </nav>
        </div>
    </div>

    <div class="main-content">
        {{if eq .currentPage "dashboard"}}
            <!-- 首页概览内容 -->
            <div class="page-header">
                <h2><i class="fas fa-database"></i> {{.title}}</h2>
            </div>

            <div class="row mb-4">
                <div class="col-md-3">
                    <div class="card text-center bg-primary text-white">
                        <div class="card-body">
                            <h5 id="totalWorkers">0</h5>
                            <p class="mb-0">Worker节点数</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="card text-center bg-success text-white">
                        <div class="card-body">
                            <h5 id="onlineWorkers">0</h5>
                            <p class="mb-0">在线节点</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="card text-center bg-info text-white">
                        <div class="card-body">
                            <h5 id="activeTasks">0</h5>
                            <p class="mb-0">活跃任务</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="card text-center bg-warning text-white">
                        <div class="card-body">
                            <h5 id="completedTasks">0</h5>
                            <p class="mb-0">已完成任务</p>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-md-6">
                    <div class="card mb-4">
                        <div class="card-header">
                            <h5 class="mb-0"><i class="fas fa-server text-primary me-2"></i>节点状态</h5>
                        </div>
                        <div class="card-body">
                            <canvas id="workerStatusChart" width="400" height="200"></canvas>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="card mb-4">
                        <div class="card-header">
                            <h5 class="mb-0"><i class="fas fa-tasks text-primary me-2"></i>任务状态</h5>
                        </div>
                        <div class="card-body">
                            <canvas id="taskStatusChart" width="400" height="200"></canvas>
                        </div>
                    </div>
                </div>
            </div>

            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0"><i class="fas fa-history text-primary me-2"></i>最近活动</h5>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-striped" id="recentActivitiesTable">
                            <thead>
                                <tr>
                                    <th>时间</th>
                                    <th>类型</th>
                                    <th>描述</th>
                                    <th>状态</th>
                                </tr>
                            </thead>
                            <tbody>
                                <!-- 活动数据将通过JavaScript动态加载 -->
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        {{else if eq .currentPage "workers"}}
            <!-- Worker管理页面内容 -->
            <div class="page-header">
                <h2><i class="{{.icon}}"></i> {{.title}}</h2>
            </div>

            <div class="row mb-4">
                <div class="col-12">
                    <div class="card">
                        <div class="card-header d-flex justify-content-between align-items-center">
                            <h5 class="mb-0"><i class="fas fa-server text-primary"></i> 节点管理</h5>
                            <div class="d-flex gap-2">
                                <button class="btn btn-outline-danger" id="batchDeleteBtn" disabled>
                                    <i class="fas fa-trash-alt"></i> 批量删除
                                </button>
                            </div>
                        </div>
                        <div class="card-body">
                            <div class="table-responsive">
                                <table class="table table-hover" id="workersTable">
                                    <thead>
                                        <tr>
                                            <th><input type="checkbox" id="selectAll" title="全选"></th>
                                            <th>名称</th>
                                            <th>ID</th>
                                            <th>IP地址</th>
                                            <th>状态</th>
                                            <th>fio版本</th>
                                            <th>注册时间</th>
                                            <th>操作</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <!-- 节点数据将通过JavaScript动态加载 -->
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        {{else if eq .currentPage "test-cases"}}
            <!-- 测试用例管理页面内容 -->
            <div class="page-header">
                <h2><i class="{{.icon}}"></i> {{.title}}</h2>
            </div>

            <div class="row mb-4">
                <div class="col-12">
                    <div class="card">
                        <div class="card-header d-flex justify-content-between align-items-center">
                            <h5 class="mb-0"><i class="fas fa-file-code text-primary"></i> 测试用例管理</h5>
                            <div class="d-flex gap-2">
                                <button class="btn btn-outline-danger" id="batchDeleteBtn" disabled>
                                    <i class="fas fa-trash-alt"></i> 批量删除
                                </button>
                                <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addTestCaseModal">
                                    <i class="fas fa-plus"></i> 添加测试用例
                                </button>
                            </div>
                        </div>
                        <div class="card-body">
                            <div class="table-responsive">
                                <table class="table table-hover" id="testCasesTable">
                                    <thead>
                                        <tr>
                                            <th><input type="checkbox" id="selectAll" title="全选"></th>
                                            <th>ID</th>
                                            <th>名称</th>
                                            <th>描述</th>
                                            <th>创建时间</th>
                                            <th>操作</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <!-- 测试用例数据将通过JavaScript动态加载 -->
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        {{else if eq .currentPage "tasks"}}
            <!-- 任务管理页面内容 -->
            <div class="page-header">
                <h2><i class="{{.icon}}"></i> {{.title}}</h2>
            </div>

            <div class="row mb-4">
                <div class="col-12">
                    <div class="card">
                        <div class="card-header d-flex justify-content-between align-items-center">
                            <h5 class="mb-0"><i class="fas fa-tasks text-primary"></i> 任务管理</h5>
                            <div class="d-flex gap-2">
                                <button class="btn btn-outline-danger" id="batchDeleteBtn" disabled>
                                    <i class="fas fa-trash-alt"></i> 批量删除
                                </button>
                                <button class="btn btn-primary" id="createTaskBtn">
                                    <i class="fas fa-plus"></i> 创建任务
                                </button>
                            </div>
                        </div>
                        <div class="card-body">
                            <div class="table-responsive">
                                <table class="table table-hover" id="tasksTable">
                                    <thead>
                                        <tr>
                                            <th><input type="checkbox" id="selectAll" title="全选"></th>
                                            <th>ID</th>
                                            <th>测试用例</th>
                                            <th>Worker</th>
                                            <th>状态</th>
                                            <th>创建时间</th>
                                            <th>操作</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <!-- 任务数据将通过JavaScript动态加载 -->
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        {{else if eq .currentPage "results"}}
            <!-- 结果分析页面内容 -->
            <div class="page-header">
                <h2><i class="{{.icon}}"></i> {{.title}}</h2>
            </div>

            <div class="row mb-4">
                <div class="col-md-3">
                    <div class="card text-center bg-primary text-white">
                        <div class="card-body">
                            <h5 id="totalTests">0</h5>
                            <p class="mb-0">总测试数</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="card text-center bg-success text-white">
                        <div class="card-body">
                            <h5 id="avgIOPS">0</h5>
                            <p class="mb-0">平均IOPS</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="card text-center bg-info text-white">
                        <div class="card-body">
                            <h5 id="avgLatency">0 ms</h5>
                            <p class="mb-0">平均延迟</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="card text-center bg-warning text-white">
                        <div class="card-body">
                            <h5 id="avgBandwidth">0 MB/s</h5>
                            <p class="mb-0">平均带宽</p>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row mb-4">
                <div class="col-12">
                    <div class="card">
                        <div class="card-header">
                            <h5 class="mb-0"><i class="fas fa-filter text-primary me-2"></i>筛选条件</h5>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-4">
                                    <label for="testCaseFilter" class="form-label">测试用例</label>
                                    <select class="form-select" id="testCaseFilter">
                                        <option value="">全部测试用例</option>
                                        <!-- 选项将通过JavaScript动态加载 -->
                                    </select>
                                </div>
                                <div class="col-md-4">
                                    <label for="workerFilter" class="form-label">Worker</label>
                                    <select class="form-select" id="workerFilter">
                                        <option value="">全部Worker</option>
                                        <!-- 选项将通过JavaScript动态加载 -->
                                    </select>
                                </div>
                                <div class="col-md-4">
                                    <label for="dateRangeFilter" class="form-label">日期范围</label>
                                    <select class="form-select" id="dateRangeFilter">
                                        <option value="">全部时间</option>
                                        <option value="today">今天</option>
                                        <option value="week">本周</option>
                                        <option value="month">本月</option>
                                    </select>
                                </div>
                            </div>
                            <div class="row mt-3">
                                <div class="col-12">
                                    <button class="btn btn-primary" onclick="applyFilters()">
                                        <i class="fas fa-filter me-1"></i>应用筛选
                                    </button>
                                    <button class="btn btn-outline-secondary" onclick="clearFilters()">
                                        <i class="fas fa-times me-1"></i>清除筛选
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row mb-4">
                <div class="col-12">
                    <div class="card">
                        <div class="card-header d-flex justify-content-between align-items-center">
                            <h5 class="mb-0"><i class="fas fa-chart-bar text-primary"></i> 测试结果</h5>
                            <div class="d-flex gap-2">
                                <button class="btn btn-outline-primary" id="refreshResultsBtn">
                                    <i class="fas fa-sync-alt"></i> 刷新
                                </button>
                                <select class="form-select form-select-sm" id="exportFormat" style="width: auto;">
                                    <option value="csv">CSV</option>
                                    <option value="json">JSON</option>
                                    <option value="xlsx">Excel</option>
                                </select>
                                <button class="btn btn-sm btn-outline-success" onclick="exportResults()">
                                    <i class="fas fa-download"></i> 导出
                                </button>
                            </div>
                        </div>
                        <div class="card-body">
                            <div class="table-responsive">
                                <table class="table table-hover" id="resultsTable">
                                    <thead>
                                        <tr>
                                            <th><input type="checkbox" id="selectAll" title="全选"></th>
                                            <th>ID</th>
                                            <th>任务ID</th>
                                            <th>Worker</th>
                                            <th>测试用例</th>
                                            <th>状态</th>
                                            <th>读IOPS</th>
                                            <th>写IOPS</th>
                                            <th>平均延迟(ms)</th>
                                            <th>操作</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <!-- 结果数据将通过JavaScript动态加载 -->
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-md-4">
                    <div class="card mb-4">
                        <div class="card-header">
                            <h6 class="mb-0"><i class="fas fa-chart-line text-primary me-2"></i>IOPS对比</h6>
                        </div>
                        <div class="card-body">
                            <canvas id="iopsChart" width="400" height="300"></canvas>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card mb-4">
                        <div class="card-header">
                            <h6 class="mb-0"><i class="fas fa-clock text-primary me-2"></i>延迟对比</h6>
                        </div>
                        <div class="card-body">
                            <canvas id="latencyChart" width="400" height="300"></canvas>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card mb-4">
                        <div class="card-header">
                            <h6 class="mb-0"><i class="fas fa-tachometer-alt text-primary me-2"></i>带宽对比</h6>
                        </div>
                        <div class="card-body">
                            <canvas id="bandwidthChart" width="400" height="300"></canvas>
                        </div>
                    </div>
                </div>
            </div>
        {{end}}
    </div>

    <footer class="footer bg-light mt-5 py-4">
        <div class="container">
            <div class="row">
                <div class="col-12 text-center">
                    <p class="mb-0">&copy; 2025 xfio - 分布式fio性能测试系统</p>
                </div>
            </div>
        </div>
    </footer>

    <!-- 添加测试用例模态框 -->
    <div class="modal fade" id="addTestCaseModal" tabindex="-1">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header bg-primary text-white">
                    <h5 class="modal-title"><i class="fas fa-plus-circle me-2"></i>添加测试用例</h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="testCaseForm">
                        <div class="mb-3">
                            <label for="testCaseName" class="form-label fw-bold">用例名称 <span class="text-danger">*</span></label>
                            <input type="text" class="form-control form-control-lg" id="testCaseName" placeholder="输入测试用例名称" required>
                            <div class="form-text">给测试用例起一个有意义的名称，如 "顺序读取测试" 或 "随机写入测试"</div>
                        </div>
                        <div class="mb-3">
                            <label for="testCaseDescription" class="form-label fw-bold">描述</label>
                            <textarea class="form-control" id="testCaseDescription" rows="3" placeholder="输入测试用例的详细描述"></textarea>
                            <div class="form-text">描述测试用例的目的和应用场景</div>
                        </div>
                        <div class="mb-3">
                            <label for="fioConfig" class="form-label fw-bold">FIO配置 (JSON格式) <span class="text-danger">*</span></label>
                            <div class="input-group">
                                <textarea class="form-control" id="fioConfig" rows="10" placeholder='{
  "name": "seq_read",
  "rw": "read",
  "bs": "128k",
  "size": "1G",
  "numjobs": 4,
  "runtime": 60,
  "time_based": 1,
  "direct": 1,
  "ioengine": "libaio",
  "iodepth": 64
}' required></textarea>
                            </div>
                            <div class="form-text">
                                请输入有效的FIO配置JSON格式。示例配置已预填在文本框中，您可以根据需要修改。
                                <a href="#" class="text-primary" data-bs-toggle="collapse" data-bs-target="#configHelp" role="button">查看配置参数说明</a>
                            </div>
                            <div class="collapse mt-2" id="configHelp">
                                <div class="card card-body bg-light">
                                    <h6>常用FIO配置参数说明：</h6>
                                    <ul class="mb-0">
                                        <li><strong>name</strong>: 任务名称</li>
                                        <li><strong>rw</strong>: 读写模式 (read, write, randread, randwrite, rw, randrw)</li>
                                        <li><strong>bs</strong>: 块大小 (如 4k, 16k, 128k)</li>
                                        <li><strong>size</strong>: 测试文件大小 (如 1G, 10G)</li>
                                        <li><strong>numjobs</strong>: 并发作业数</li>
                                        <li><strong>runtime</strong>: 运行时间（秒）</li>
                                        <li><strong>direct</strong>: 是否使用直接I/O (0=否, 1=是)</li>
                                        <li><strong>ioengine</strong>: I/O引擎 (libaio, sync, psync等)</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer bg-light">
                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">
                        <i class="fas fa-times me-1"></i>取消
                    </button>
                    <button type="button" class="btn btn-primary" id="saveTestCaseBtn">
                        <i class="fas fa-save me-1"></i>保存测试用例
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- 创建任务模态框 -->
    <div class="modal fade" id="createTaskModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header bg-primary text-white">
                    <h5 class="modal-title"><i class="fas fa-tasks me-2"></i>创建任务</h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form>
                        <div class="mb-3">
                            <label for="testCaseSelect" class="form-label fw-bold">选择测试用例 <span class="text-danger">*</span></label>
                            <select class="form-select form-select-lg" id="testCaseSelect" required>
                                <option value="">选择测试用例</option>
                                <!-- 选项将通过JavaScript动态加载 -->
                            </select>
                        </div>
                        <div class="mb-3">
                            <label for="workerSelect" class="form-label fw-bold">选择Worker <span class="text-danger">*</span></label>
                            <select class="form-select form-select-lg" id="workerSelect" required>
                                <option value="">选择Worker</option>
                                <!-- 选项将通过JavaScript动态加载 -->
                            </select>
                        </div>
                    </form>
                </div>
                <div class="modal-footer bg-light">
                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">
                        <i class="fas fa-times me-1"></i>取消
                    </button>
                    <button type="button" class="btn btn-primary" id="createTaskSubmitBtn">
                        <i class="fas fa-check me-1"></i>创建任务
                    </button>
                </div>
            </div>
        </div>
    </div>

    <script src="/static/vendor/bootstrap.bundle.min.js"></script>
    <script src="/static/vendor/chartjs/chart.min.js"></script>
    <script src="/static/js/main.js?v={{.assetVersion}}"></script>
    {{if eq .currentPage "workers"}}
    <script src="/static/js/workers.js?v={{.assetVersion}}"></script>
    {{else if eq .currentPage "test-cases"}}
    <script src="/static/js/test-cases.js?v={{.assetVersion}}"></script>
    {{else if eq .currentPage "tasks"}}
    <script src="/static/js/tasks.js?v={{.assetVersion}}"></script>
    {{else if eq .currentPage "results"}}
    <script src="/static/js/results.js?v={{.assetVersion}}"></script>
    {{end}}
</body>
</html>